<extend name="Layout/index" />
<block name="main">

    <h1>请选择您的地址:</h1>
    <form action="<{:U('Goods/add')}>">
    <select id="pro"></select>
    <select id="city"></select>
    <select id="area"></select>
    <select id="street"></select>
	<input type="submit">
    </form>
    <script>
    //获取省份信息
    $.ajax({
        type:'get',
        url:"<{:U('Goods/address')}>",
        success:function(data){
            // console.log(data);
            //先清空原先的数据
            //遍历省份数据
            for (var i = 0; i < data.length; i++) {
                $('<option value="'+data[i].id+'">'+data[i].name+'</option>').appendTo('#pro');
            }
        },
        dataType:'json',
        async:false,//同步!!!!!!
    })


    //绑定事件
    $('#pro,#city,#area').change(function(){
        //获取当前的vale值
        var upid = $(this).val();
        console.log(upid);
        //一触发change事件,就清空后面所有的数据
        $(this).nextAll('select').show().empty();
        //保留$(this)变量
        var _this = $(this);
        // console.log($(this));

        //请求下一级数据
        $.ajax({
            type:'get',
            url: "<{:U('Goods/address')}>",
            data:"upid="+upid,
            success:function(data){
                //如果下一级没数据,就隐藏后面的下拉框
                if (!data) {
                    _this.nextAll('select').hide();
                    return;
                };
                // console.log(data);
                // console.log($(this).constructor);
                //填充下一级的数据
                for (var i = 0; i < data.length; i++) {
                    $('<option value="'+data[i].id+'">'+data[i].name+'</option>').appendTo(_this.next('select'));
                }
                //自动触发后面的select的change事件
                _this.next('select').trigger('change');
            },
            dataType:'json',
        })
    })

    //自动加载省份的change事件
    $('#pro').trigger('change');


    </script>
</block>